<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Grid Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Grid</h1>
        </gs-jumbo>
            
        <gs-container padded>
            <h3 class="doc-header">Tag:</h3>
            <pre>&lt;gs-grid&gt;
    &lt;gs-block&gt;...&lt;/gs-block&gt;
    &lt;gs-block&gt;...&lt;/gs-block&gt;
&lt;/gs-grid&gt;</pre>
                
            <h3 class="doc-header">Description:</h3>
            <div class="doc-section">
                <p>The gs-grid element is used to contain a set of gs-block elements for displaying tabular data. The gs-block elements are similar to cells in Excel and similar to &lt;td&gt; elements in HTML tables.
                
                The gs-grid element is used for setting the width of the gs-block columns. A grid with more blocks than columns will be broken into rows of blocks. When the page gets too thin the grid can make all of it's blocks 're-flow' to display one block per line.</p>
                
                <b>When would you use a grid instead of a table?</b>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;Generally, if you are displaying data, you want &lt;table&gt;. A table element attempts to resize it's columns to show each cell's content. It can also be configured to re-flow using CSS such that labels are repeated for each row. This way each field is identified in the current viewport. You need this when displaying tabular data. For example, ten columns of dates are useless if you don't have a label telling you which date is which.<br />
                &nbsp;&nbsp;&nbsp;&nbsp;If you are not displaying tabular data, then you may want a gs-grid. A gs-grid gives you control of your column widths. In the case of layout, you  typically want to set your column widths and have them be respected so your layout looks correct. For example, a grid of buttons is a common use for gs-grid. If you set a gs-grid of buttons to re-flow on a narrow screen, they do not need additional labels. They'll look and work properly whether it re-flows or not.</p>
            </div>
            
            <h1 class="doc-header">Examples:</h1>
            <div class="doc-section">
                <div class="doc-example-description">
                    <span class="h3">Skeleton Example:</span>
                    <p>A basic gs-grid element with three blocks. Without attributes the grid will have the following behaviors:</p>
                    <ol>
                        <li>All three blocks will be equal width.</li>
                        <li>All three blocks will flow onto their own lines when the viewport is below a certain width.</li>
                    </ol>
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-grid>
                            <gs-block bg-warning>Block 1</gs-block>
                            <gs-block bg-danger>Block 2</gs-block>
                            <gs-block bg-success>Block 3</gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[gutter]</code>:</span>
                    <p>A gs-grid element with the "gutter" attribute set and contains three blocks. This grid will have space between the content of the blocks.
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-grid gutter>
                            <gs-block><div bg-warning>Block 1</div></gs-block>
                            <gs-block><div bg-danger>Block 2</div></gs-block>
                            <gs-block><div bg-success>Block 3</div></gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[padded]</code>:</span>
                    <p>The padded attribute on a gs-grid adds padding to the gs-grid. The width of the grid is not affected by this padding.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-grid padded>
                            <gs-block bg-warning>Block 1</gs-block>
                            <gs-block bg-danger>Block 2</gs-block>
                            <gs-block bg-success>Block 3</gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[widths]</code>:</span>
                    <p>A gs-grid element with the "widths" attribute will set the widths of its columns. When setting the column widths, the gs-grid will total all the column values and divide each column by the total to get a percentage. In this example, the first column will be set to 20%, the second to 30% and the third to 50%.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-grid widths="2,3,5">
                            <gs-block bg-warning>Block 1</gs-block>
                            <gs-block bg-danger>Block 2</gs-block>
                            <gs-block bg-success>Block 3</gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[reflow-at]</code>:</span>
                    <p>In this example we have three gs-grid elements with the "reflow-at" attribute set. The value of the "reflow-at" attribute will determine at what window width the gs-grid element will put it's blocks in one vertical column.</p>
                    
                    Here is a list of shortcuts for some pre-set widths:
                    <ol>
                        <li>"small" or "sml" is replaced with "992px"</li>
                        <li>"medium" or "med" are replaced with "1200px"</li>
                        <li>"large" or "lrg" are replaced with "10000px"</li>
                    </ol>
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-grid reflow-at="400px">
                            <gs-block bg-warning>Grid 1, Block 1</gs-block>
                            <gs-block bg-danger>Grid 1, Block 2</gs-block>
                            <gs-block bg-success>Grid 1, Block 3</gs-block>
                        </gs-grid>
                        
                        <gs-grid reflow-at="600px">
                            <gs-block bg-warning>Grid 2, Block 1</gs-block>
                            <gs-block bg-danger>Grid 2, Block 2</gs-block>
                            <gs-block bg-success>Grid 2, Block 3</gs-block>
                        </gs-grid>
                        
                        <gs-grid reflow-at="800px">
                            <gs-block bg-warning>Grid 3, Block 1</gs-block>
                            <gs-block bg-danger>Grid 3, Block 2</gs-block>
                            <gs-block bg-success>Grid 3, Block 3</gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Multiple Rows Example:</span>
                    <p>A gs-grid element with the "widths" attribute set for three blocks but it contains six blocks. The widths set in the "widths" attribute will be applied to the first three blocks and will be repeated on the second three blocks.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-grid widths="1,2,3">
                            <gs-block bg-warning>Block 1</gs-block>
                            <gs-block bg-danger>Block 2</gs-block>
                            <gs-block bg-success>Block 3</gs-block>
                            <gs-block bg-warning>Block 4</gs-block>
                            <gs-block bg-danger>Block 5</gs-block>
                            <gs-block bg-success>Block 6</gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Setting a Block "width" Attribute:</span>
                    <p>A gs-grid element will use the "widths" attribute to set width attributes only on blocks that do not contain width attributes already. In this example, the fourth and fifth blocks have their "width" attributes pre-set.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-grid widths="1,2,3">
                            <gs-block bg-warning>Block 1</gs-block>
                            <gs-block bg-danger>Block 2</gs-block>
                            <gs-block bg-success>Block 3</gs-block>
                            <gs-block width="2">Block 4</gs-block>
                            <gs-block width="4" bg-primary>Block 5</gs-block>
                            <gs-block bg-warning>Block 6</gs-block>
                            <gs-block bg-danger>Block 7</gs-block>
                            <gs-block bg-success>Block 8</gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[min-width]</code>:</span>
                    <p>This "min-width" attribute enables you to change the block numbering and reflowing depending the minimum width of the screen. The "min-width" attribute takes a list of expressions seperated by semi-colons. The format of an expression is "&lt;WINDOW-WIDTH&gt; {&lt;BLOCKS&gt;};". The BLOCKS portion of the expression is either "reflow" or a comma-seperated list of widths (e.g. "1,1,2"). Each WINDOW-WIDTH must be larger than the one before it.</p>
                    
                    Here is a list of shortcuts for some pre-set sizes:
                    <ol>
                        <li>All instances of "all" are replaced with "0px"</li>
                        <li>All instances of "small" or "sml" are replaced with "768px"</li>
                        <li>All instances of "medium" or "med" are replaced with "992px"</li>
                        <li>All instances of "large" or "lrg" are replaced with "1200px"</li>
                    </ol>
                    
                    In this example the gs-grid element will change it's blocks at 3 widths.<br />
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-grid min-width="all {reflow}; 400px {1,1}; sml {1,1,1};">
                            <gs-block bg-warning>Block 1</gs-block>
                            <gs-block bg-danger>Block 2</gs-block>
                            <gs-block bg-success>Block 3</gs-block>
                            <gs-block bg-danger>Block 4</gs-block>
                            <gs-block bg-primary>Block 5</gs-block>
                            <gs-block bg-warning>Block 6</gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute <code>[media]</code>:</span>
                    <p>The "media" attribute enables you to change the block numbering and reflowing depending <a href="https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries">CSS Media Queries</a>. The BLOCKS portion of the expression is either "reflow" or a comma-seperated list of widths (e.g. "1,1,2"). The "media" attribute takes a list of expressions seperated by semi-colons. The format of an expression is "&lt;MEDIA-SELECTOR&gt; {&lt;BLOCKS&gt;};". Precedence for the font-sizes is determined by order, so the last expression is more important that the first.</p>
                    
                    There are several shortcuts for some pre-set sizes:
                    <ol>
                        <li>All instances of "small" or "sml" are replaced with "768px"</li>
                        <li>All instances of "medium" or "med" are replaced with "992px"</li>
                        <li>All instances of "large" or "lrg" are replaced with "1200px"</li>
                    </ol>
                    
                    In this example the gs-grid element will change it's blocks at 3 media conditions.<br />
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-grid media="(max-width: 400px) {1,1}; (min-width: 401px) {1,1,1}; print {reflow};">
                            <gs-block bg-warning>Block 1</gs-block>
                            <gs-block bg-danger>Block 2</gs-block>
                            <gs-block bg-success>Block 3</gs-block>
                            <gs-block bg-danger>Block 4</gs-block>
                            <gs-block bg-primary>Block 5</gs-block>
                            <gs-block bg-warning>Block 6</gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Button Example:</span>
                    <p>A gs-grid element with four blocks. Each contains a button with some or all of its corner rounding removed. In this example, gs-grid causes these buttons to look like a group.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-grid>
                            <gs-block>
                                <gs-button icon="backward" remove-right icontop></gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button icon="pause" remove-all icontop></gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button icon="forward" remove-all icontop></gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button icon="volume-up" remove-left icontop></gs-button>
                            </gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
            </div>
        </gs-container>
    </body>
</html>